<template>
	<view class="wrapper bg-linear">
		<view class="wrapper bg-color shadow1 border-r-10 m-b-12" v-for="(item,index) in posts" :key="index">
			<view class="flex-s-c " style="padding-bottom: 60rpx;">
				<view>
					<van-image width="100rpx" height="100rpx" :src="item.icon" round />
				</view>
				<view class="p-l-8">
					<view class="p-b-10">
						<view class="t-16 t-bold">{{item.name}}</view>
					</view>
					<view class="flex-s-c t-14">
						<view class="color4">
							{{`${item.height}cm / ${item.weight}kg / ${item.age}岁`}}
						</view>
						<view class="color2" style="padding-left: 62rpx;">
							{{item.constellation}}
						</view>
					</view>
				</view>
			</view>
			<view class="t-16 ">
				{{item.message}}
			</view>
			<view>
				<van-grid column-num="3" :border="false">
					<van-grid-item use-slot v-for="(imgItem,imgIndex) in item.imgs" :key="imgIndex">
						<van-image width="180rpx" height="180rpx" radius="10px" :src="imgItem" />
					</van-grid-item>
				</van-grid>
			</view>
			<view>
				<van-cell :title="item.address" :border="false">
					<view slot="icon">
						<van-icon name="location" color="#3c91ff" size="30rpx" />
					</view>
					<view class="flex-e-c">
						<van-icon name="comment" color="#3c91ff" size="42rpx" />
						<view class="t-16 color3 " style="padding-left: 3px;">
							{{item.comment}}
						</view>
					</view>
					<view slot="right-icon" class="p-l-12">
						<view class="flex-e-c">
							<van-icon name="like" color="#e5404f" size="42rpx" />
							<view class="t-16 color3" style="padding-left: 3px;">
								{{item.like}}
							</view>
						</view>
					</view>
				</van-cell>
			</view>
		</view>
		<view class="post-button">
			<van-image width="160rpx" height="160rpx" src="../../../static/image/post-button.png" />
		</view>
	</view>
</template>

<script>
	export default {
		name: "ppl-post",
		props: {
			posts: Array
		},
		data() {
			return {

			};
		},
		created() {
			console.log(this, 'this')
		}
	}
</script>

<style scoped>
	.post-button{
		position: fixed;
		right: 15px;
		bottom: 100px;
	}

</style>